<script setup>
import {deleteShardByMd5, uploadInfo} from "@/apis/user"
import {onMounted, ref} from "vue";
import {formatBytes} from "@/utils/ByteUtil";
import fileIcon from "@/images/icon/file.png";
import videoIcon from "@/images/icon/video.png";
import audioIcon from "@/images/icon/audio.png";
import zipIcon from "@/images/icon/zip.png";
import javaIcon from "@/images/icon/java.png";
import javascriptIcon from "@/images/icon/javascript.png";
import exeIcon from "@/images/icon/exe.png";
import pdfIcon from "@/images/icon/pdf.png";
import docIcon from "@/images/icon/doc.png";
import pptIcon from "@/images/icon/ppt.png";
import xlsIcon from "@/images/icon/xls.png";
import txtIcon from "@/images/icon/txt.png";
import rtfIcon from "@/images/icon/rtf.png";
import csvIcon from "@/images/icon/csv.png";
import htmlIcon from "@/images/icon/html.png";
import xmlIcon from "@/images/icon/xml.png";
import nullIcon from "@/images/icon/null.png";
import {toBeContinued} from "@/stores/uploadInfo";
import {ElMessage} from "element-plus";
import {uploadInfoStore} from "@/stores/uploadStore";
import {serverPath} from "@/utils/path";

const uis = toBeContinued()
const uploadList = uploadInfoStore()

function getUploadInfo() {
  uploadInfo().then(res => {
    uis.list = res.data.data
  })
}

async function deleteShard(row) {
  if(row.totalShards === row.count){
    ElMessage.error('文件正在保存,无法删除')
  }

  if(uploadList.fileList.length > 0){
    ElMessage.error('文件上传时,无法删除')
  }else{
    uis.num--
    await deleteShardByMd5(row.fileMd5)
    await getUploadInfo()
  }
}

function imagePreview(row) {
  const fileName = row.fileName
  const fileId = row.fileId;
  // 如果是图片类型
  const image = ["jpg", "jpeg", "png", "gif", "bmp", "webp"]
  const video = ["mp4", "avi", "mkv", "mov", "wmv", "flv", "mpeg", "webm", "3gp"]
  const audio = ["mp3", "wav", "ogg", "flac", "aac", "wma", "m4a", "opus", "mid", "midi", "amr", "ac3", "ape"]
  const documentation = ["pdf", "doc", "docx", "ppt", "pptx", "xls", "xlsx", "txt", "rtf", "csv", "html", "xml"]
  const zip = ["zip", "rar", "7z", "tar", "gz", "bz2"];
  if (row.folderType === 0) {
    return fileIcon
  } else if (image.some(ext => fileName.toLowerCase().endsWith(ext))) {
    return `${serverPath}/preview/thumbnail/${fileId}`
  } else if (video.some(ext => fileName.toLowerCase().endsWith(ext))) {
    return videoIcon
  } else if (audio.some(ext => fileName.toLowerCase().endsWith(ext))) {
    return audioIcon
  } else if (zip.some(ext => fileName.toLowerCase().endsWith(ext))) {
    return zipIcon
  } else if (fileName.toLowerCase().endsWith("java") || fileName.toLowerCase().endsWith("jar")) {
    return javaIcon
  } else if (fileName.toLowerCase().endsWith("javascript")) {
    return javascriptIcon
  } else if (fileName.toLowerCase().endsWith("exe")) {
    return exeIcon
  } else if (documentation.some(ext => fileName.toLowerCase().endsWith(ext))) {
    if (fileName.toLowerCase().endsWith("pdf")) {
      return pdfIcon
    } else if (fileName.toLowerCase().endsWith("doc") || fileName.toLowerCase().endsWith("docx")) {
      return docIcon
    } else if (fileName.toLowerCase().endsWith("ppt") || fileName.toLowerCase().endsWith("pptx")) {
      return pptIcon
    } else if (fileName.toLowerCase().endsWith("xls") || fileName.toLowerCase().endsWith("xlsx")) {
      return xlsIcon
    } else if (fileName.toLowerCase().endsWith("txt")) {
      return txtIcon
    } else if (fileName.toLowerCase().endsWith("rtf")) {
      return rtfIcon
    } else if (fileName.toLowerCase().endsWith("csv")) {
      return csvIcon
    } else if (fileName.toLowerCase().endsWith("html")) {
      return htmlIcon
    } else if (fileName.toLowerCase().endsWith("xml")) {
      return xmlIcon
    }
  } else {
    return nullIcon
  }
  // return `http://192.168.151.78:80/preview/thumbnail/${fileId}`
}

</script>

<template>
  <el-table :data="uis.list">
    <el-table-column width="300" label="文件名称">
      <template v-slot="scope">
        <div class="smallHands" style="display: flex">
          <!-- 图片 -->
          <div style="display: flex;align-items: center;align-content: center; margin-right: 12px;">
            <img style="height: 30px;width: 30px;user-select: none;" :src="imagePreview(scope.row)">
          </div>
          <!-- 正常状态显示名称 -->
          <div
              style="display: flex;align-items: center;width: 400px;align-content: center"
              class="smallHands"><span
              style="font-size: 7px;font-weight: 600;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;user-select: none;">
                          {{ scope.row.fileName }}</span></div>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="占用空间">
      <template v-slot="scope">
        <span> {{ formatBytes(scope.row.count * 1024 * 1024 * 5) }} </span>
      </template>
    </el-table-column>
    <el-table-column label="上传进度">
      <template v-slot="scope">
        <span> {{ (scope.row.count / scope.row.totalShards * 100).toFixed(2) }}% </span>
      </template>
    </el-table-column>
    <el-table-column label="状态">
      <template v-slot="scope">
        <el-text type="danger" style="cursor: pointer;">
          {{  scope.row.totalShards === scope.row.count ? "保存中":"" }}
        </el-text>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template v-slot="scope">
        <el-text type="danger" v-if="scope.row.count !== scope.row.totalShards" style="cursor: pointer;" @click="deleteShard(scope.row)">删除</el-text>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped lang="scss">

</style>